<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>悄悄投票</title>
  <link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css" rel="stylesheet">
  <style>
    html,
    body,
    p,
    ul,
    li,
    main,
    section {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      box-sizing: border-box;
      padding: 0 8px;
      background-color: #fafafa;
    }

    .btn-submit {
      width: 80%;
      margin: 35px auto 0;
    }

    .poll-box {
      font-size: 8px;
    }

    .poll-result {
      display: none;
    }
  </style>
</head>

<body>
  <main>
    <section class="vote-box">
      <!-- 静态示例 -->
      <!-- <div class="weui-cells__title">1.世界最高峰是？</div>
      <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="s11">
          <div class="weui-cell__hd">
            <input type="radio" class="weui-check" name="vote1" id="s11" checked="checked">
            <i class="weui-icon-checked"></i>
          </div>
          <div class="weui-cell__bd">
            <p>毕加索山峰</p>
          </div>
        </label>
        <label class="weui-cell weui-check__label" for="s12">
          <div class="weui-cell__hd">
            <input type="radio" name="vote1" class="weui-check" id="s12">
            <i class="weui-icon-checked"></i>
          </div>
          <div class="weui-cell__bd">
            <p>珠穆朗玛峰</p>
          </div>
        </label>
      </div> -->
    </section>
    <!-- <section class="btn-submit">
      <a href="javascript:;" class="weui-btn weui-btn_primary" id="vote">投票</a>
      <a href="javascript:;" class="weui-btn weui-btn_plain-primary" id="show-result">显示结果</a>
    </section> -->
  </main>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.js"></script>
  <!-- 如果使用了某些拓展插件还需要额外的JS -->
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.js"></script>
  <!-- <import file="poll.js.poll" /> -->
  <script>
    var listId = "{$parameter['list_id']}";
    $.ajax({
      type: "POST",
      url: "__CONTROLLER__/getIsUser",
      data: {
        "list_id": listId
      },
      dataType: "json",
      success: function (response) {
        console.log(response);
      }
    });
    
    $.ajax({
      type: "POST",
      url: "__CONTROLLER__/SelectInfoIndex",
      data: {
        list_id: listId,
      },
      dataType: "json",
      success: function (response) {

        // 已投票
        if (response.errcode && response.errcode === 1) {
          // 投票结果
          $.ajax({
            type: "POST",
            url: "__CONTROLLER__/getResultInfo",
            data: {
              "list_id": listId
            },
            dataType: "json",
            success: function (response) {
              let voteItem = '';

              if (response.data.title && response.data.title.length > -1) {

                for (let i = 0; i < response.data.title.length; i++) {
                  let optionsTmp = '';
                  voteItem +=
                    `<div class="topic-wrapper">
                      <div class="weui-cells__title" data-id="${response.data.title[i].id}" data-topic="${response.data.title[i].title}">${response.data.title[i].title}</div>
                      <div class="weui-cells weui-cells_checkbox">`
                  for (let j = 0; j < response.data.title[i].options.length; j++) {

                    let tmpOptionItem = response.data.title[i].options[j]

                    optionsTmp =
                      `<label class="weui-cell weui-check__label" for="s${tmpOptionItem.id}">
                        <div class="weui-cell__hd">
                          <input type="radio" class="weui-check" name="vote${response.data.title[i].id}" id="s${tmpOptionItem.id}" ${tmpOptionItem.selected === 1 ? "checked" : ''} data-selected="${tmpOptionItem.selected}" disabled="disabled" data-title_id="${tmpOptionItem.title_id}" data-name="${tmpOptionItem.options_content}">
                          <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                          <p>${tmpOptionItem.options_content}</p>
                        </div>
                        <div class="weui-cell__ft poll-result">
                          <p class="poll-box"><span class="poll">${tmpOptionItem.num}</span>票</p>
                        </div>
                      </label>`
                    voteItem += optionsTmp
                  }
                  voteItem += `</div></div>`
                }
                let htmlBtn =
                  `<section class="btn-submit">
                    <a href="javascript:;" class="weui-btn weui-btn_primary" id="vote">已投票</a>
                    <a href="javascript:;" class="weui-btn weui-btn_plain-primary" id="show-result">显示结果</a>
                  </section>`
                voteItem += htmlBtn
                $('.vote-box').append(voteItem)

                $('#vote').addClass('weui-btn_disabled')
                $('#vote').off('click')
                $('#vote').text('已投票')
              }
            }
          });
        } else {

          let voteItem = '';
          if (response.data.title && response.data.title.length > -1) {

            for (let i = 0; i < response.data.title.length; i++) {
              let optionsTmp = '';
              voteItem +=
                `<div class="topic-wrapper">
                  <div class="weui-cells__title" data-id="${response.data.title[i].id}" data-topic="${response.data.title[i].title}">${response.data.title[i].title}</div>
                  <div class="weui-cells weui-cells_checkbox">`
              for (let j = 0; j < response.data.title[i].options.length; j++) {

                let tmpOptionItem = response.data.title[i].options[j]
                optionsTmp =
                  `<label class="weui-cell weui-check__label" for="s${tmpOptionItem.id}">
                <div class="weui-cell__hd">
                  <input type="radio" class="weui-check" name="vote${response.data.title[i].id}" id="s${tmpOptionItem.id}" data-title_id="${tmpOptionItem.title_id}" data-name="${tmpOptionItem.options_content}">
                  <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                  <p>${tmpOptionItem.options_content}</p>
                </div>
                <div class="weui-cell__ft poll-result">
                  <p class="poll-box"><span class="poll"></span>票</p>
                </div>
              </label>`
                voteItem += optionsTmp
              }
              voteItem += `</div></div>`
            }
            let htmlBtn =
              `<section class="btn-submit">
                <a href="javascript:;" class="weui-btn weui-btn_primary" id="vote">投票</a>
                <a href="javascript:;" class="weui-btn weui-btn_plain-primary" id="show-result">显示结果</a>
              </section>`
            voteItem += htmlBtn
            $('.vote-box').append(voteItem);
          }

          $('.vote-box').on('click', '#show-result', function () {
            $.ajax({
              type: "POST",
              url: "__CONTROLLER__/getResultInfo",
              data: {
                "list_id": listId
              },
              dataType: "json",
              success: function (response) {
                let pollResult = []

                if (response.data.title && response.data.title.length > -1) {


                  for (let i = 0; i < response.data.title.length; i++) {

                    if (response.data.title[i] && response.data.title[i].options.length > -1) {

                      for (let j = 0; j < response.data.title[i].options.length; j++) {

                        pollResult.push(response.data.title[i].options[j].num)
                      }
                    }
                  }
                }
                console.log(pollResult)
                $.map($('.vote-box .topic-wrapper .poll-result').find('.poll'), function (item,
                  itemIndex) {
                  console.log(item)
                  $(item).text(pollResult[itemIndex])
                })
              },
              error: function () {
                $.toast('请先投票')
              }
            });
          })
        }


        $('#vote').on('click', function () {
          let postData = [];
          //获取投票选项
          console.log($('.vote-box .topic-wrapper'))
          $.map($('.vote-box .topic-wrapper'), function (topic, topicIndex) {
            let tmp = []
            let itemData = []

            $.map($(topic).find('input'), function (item, itemIndex) {

              if ($(item).is(':checked')) {
                itemData.push({
                  "id": $(item).attr('id').replace('s', ''),
                  "name": $(item).data('name'),
                  "value": itemIndex,
                  "title_id": $(item).data('title_id')
                })
              }
            })
            postData.push({
              "list_id": listId,
              "data": itemData
            })
          })
          console.log(postData)
          $.ajax({
            type: "POST",
            url: "__CONTROLLER__/SaveVoteData",
            data: {
              "data": postData
            },
            dataType: "json",
            success: function (response) {
              // TODO
              console.log(response);
              if (response.errcode === 0) {
                $.toast('投票成功', 1000)
                $('#vote').addClass('weui-btn_disabled')
                $('#vote').off('click')
                $('#vote').text('已投票')
              }
            }
          });
        })
        
        // 显示结果事件
        $('.vote-box').on('click', '#show-result', function (evt) {
          var $this = $(this)
          $(this).parent().prevAll().find('.poll-result').toggle(10, function () {})
          let textResult = $(this).text()
          $this.text(textResult === "显示结果" ? "隐藏结果" : "显示结果")
        })
      }
    });
  </script>
</body>

</html>